<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data总结案例</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>学生信息</h2> <br><br>
        <button @click="addage">年龄+1岁</button>
        <br><br>
        <button @click.once="addsex">添加性别属性（仅点击一次）</button>
        <br><br>
        <button @click="updatename">修改姓名为 jary 或者 tom ，来回横跳</button>
        <br><br>
        <input type="text" name="" id="" @keyup.enter="updateage" v-model="uage">
        <button @click="updateage">自定义年龄</button>
        <br><br>
        <input type="text" name="" id="" @keyup.enter="updatefirendname" v-model="ufirendname">
        <button @click="updatefirendname">修改第一个好朋友的名字</button>
        <br><br>
        <input type="text" name="" id="" @keyup.enter="addhobby" v-model="ahobby">
        <button @click="addhobby">在列表首位添加一个爱好</button>
        <br><br>
        <input type="text" name="" id="" @keyup.enter="addfirend" v-model="afirend">
        <button @click="addfirend">在列表末位添加一个朋友</button>
        <br><br>
        姓名：<input type="text" name="" id="" v-model="afirendagename">
        年龄：<input type="text" name="" id="" v-model="afirendage">
        <button @click="updatefirendage">为指定name的朋友增加或修改年龄</button>
        <br><br>
        <button @click="hobbyflag=!hobbyflag">爱好 过滤/取消过滤 抽烟 和 喝酒</button>
        <br><br>
        <button @click="firendsflag=1">朋友们进行年龄的升序</button>
        <button @click="firendsflag=2">朋友们进行年龄的降序</button>
        <button @click="firendsflag=0">朋友们默认顺序</button>
        <br><br>
        <button @click="addallfirendsex">为所有朋友们添加一个性别为男的属性 (仅点击一次)</button>
        <h3 v-for="(value,key) of student" :key="value">
            {{key}} : {{value}}
        </h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(value,index) of hobbys" :key="value">
                {{value}}
            </li>
        </ul>
        <h3>朋友们</h3>
        <ul>
            <li v-for="f of firendss" :key="f.name">
                <template v-for="(ff,index) of f">
                    {{ff}}
                </template>
            </li>
        </ul>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#root",
        data() {
            return {
                uage: "",
                ufirendname: "",
                ahobby: "",
                afirend: "",
                afirendagename: "",
                afirendage: "",
                hobbyflag: false,
                firendsflag: 0, //0不排序 1升序 2降序
                student: {
                    name: "jary",
                    age: 18
                },
                hobby: ['抽烟', '喝酒', '写代码'],
                firends: [
                    { name: "aaa", age: 25 },
                    { name: "bbb", age: 20 },
                    { name: "ccc", age: 25 },
                    { name: "ddd", age: 30 }
                ]
            }
        },
        methods: {
            addage() {
                this.student.age++
            },
            addsex() {
                this.$set(this.student, "sex", "男")
            },
            updatename() {
                this.student.name = this.student.name === "jary" ? "tom" : "jary";
            },
            updateage() {
                this.student.age = this.uage;
                this.uage = ''
            },
            updatefirendname() {
                this.firends[0].name = this.ufirendname
                this.ufirendname = ''
            },
            addhobby() {
                this.hobby.unshift(this.ahobby)
                this.ahobby = ''
            },
            addfirend() {
                this.firends.push({ name: this.afirend })
                this.afirend = ""
            },
            updatefirendage() {
                for (const key in this.firends) {
                    if (this.firends[key].name == this.afirendagename) {
                        if (this.firends[key].age !== undefined) {
                            this.firends[key].age = this.afirendage;
                        }
                        else {
                            this.$set(this.firends[key], 'age', this.afirendage);
                        }
                    }
                }
                this.afirendagename = ""
                this.afirendage = ""
            },
            addallfirendsex() {
                this.firends.forEach(element => {
                    this.$set(element, 'sex', '男')
                });
            }
        },
        computed: {
            hobbys() {
                if (this.hobbyflag) {
                    return this.hobby.filter((e) => {
                        return !(e === "抽烟" || e === "喝酒")
                    })
                }
                else {
                    return this.hobby
                }

            },
            firendss() {
                if (this.firendsflag) {
                    const firend = [...this.firends];
                    return firend.sort((q, p) => {
                        return this.firendsflag === 1 ? q.age - p.age : p.age - q.age
                    })
                }
                else {
                    return this.firends
                }
            }
        }
    })


</script>

</html>